<template>
    <div class="page">
    
        <div class="page-content">
            <div class="items">
                <!--已认证-->
                <template v-if="userPersonalStatus">
                    <item>
                        学历
                        <span class="item-note">{{education|educationFilt}}</span>
                    </item>
                    <item>
                        常用住址
                        <span class="item-note">{{nowAddress}}</span>
                    </item>
                </template>
                <!--未认证-->
                <template v-else>
                    <item class="item-icon-right" @click.native="openEducationDo" ref="education">
                        学历
                        <span class="item-note">{{educationText}}</span>
                        <i class="icon ion-ios-arrow-right"></i>
                    </item>
                    <b-linput label="常用住址" placeholder="请输入常用地址" v-model="nowAddress" ref="nowAddress"></b-linput>
                </template>
                <item class="item-icon-right" @click.native="openProfessionDo">
                    职业信息
                    <span class="item-note" v-show="professionOk"><img class="ok_img" src="/static/img/CIRCLE-OK@3x.png"/></span>
                    <i class="icon ion-ios-arrow-right"></i>
                </item>
                <item class="item-icon-right" @click.native="openUrgencyDo">
                    紧急联系人
                    <span class="item-note" v-show="urgencyOk"><img class="ok_img" src="/static/img/CIRCLE-OK@3x.png"/></span>
                    <i class="icon ion-ios-arrow-right"></i>
                </item>
            </div>
            <template v-if="userPersonalStatus">
                <div class="submit">
                    <md-button class="button button-royal button-block">
                        已审核
                    </md-button>
                </div>
            </template>
            <template v-else>
                <div class="submit">
                    <md-button class="button button-balanced button-block" @click.native="saveUserBaseDo">
                        认证
                    </md-button>
                </div>
            </template>
        </div>
        <!--遮罩层-->
        <b-shadow :show="showShadow"></b-shadow>
        <!--学历选择框-->
        <div class="education" ref="education" :style="{transform:`translate3d(0,${educationY},0)`}">
            <ul>
                <li @click="selectEducationDo(educationItem)" v-for="educationItem in educationList" :class="[education==educationItem.value?'selected':'']">
                    <div class="hairline-bottom"></div>
                    {{educationItem.text}}
                </li>
            </ul>
            <md-button class="button button-block button-balanced" @click.native="closeEducationDo">
                确定
            </md-button>
        </div>
        <!--职业信息框-->
        <div class="professionBox" ref="professionBox" :style="{transform:`translate3d(0,${professionY},0)`}">
            <template v-if="userPersonalStatus">
                <item v-if="professionName">
                    行业
                    <span class="item-note">{{professionName}}</span>
                </item>
                <item>
                    年收入
                    <span class="item-note">{{yearIncome}}</span>
                </item>
                <item>
                    单位名称
                    <span class="item-note">{{companyName}}</span>
                </item>
                <item>
                    所在省市
                    <span class="item-note">{{companyProvince}} {{companyCity}}</span>
                </item>
                <item>
                    单位地址
                    <span class="item-note">{{companyAddress}}</span>
                </item>
            </template>
            <template v-else>
                <b-picker v-if="industryList" label="行业" :list="industryList" v-model="profession" ref="professionPicker" :afterShow="true" @click.native="closeProfessionDo" @input="industryInput"></b-picker>
                <b-linput label="年收入" placeholder="请输入年收入" :betterInput="1" v-model="yearIncome" ref="yearIncome"></b-linput>
                <b-linput label="单位名称" placeholder="请输入单位名称" :betterInput="1" v-model="companyName" ref="companyName"></b-linput>
                <b-picker ref="cityPicker" label="所在省市" :list="cityList" :afterShow="true" @click.native="closeProfessionDo" @input="professionInput"></b-picker>
                <b-linput label="单位地址" placeholder="请输入单位地址" :betterInput="1" v-model="companyAddress" ref="companyAddress"></b-linput>
            </template>
            <md-button class="button button-block button-balanced" @click.native="closeProfessionDo">
                确定
            </md-button>
        </div>
        <!--紧急联系人信息框-->
        <div class="urgency" ref="urgency" :style="{transform:`translate3d(0,${urgencyY},0)`}">
            <template v-if="userPersonalStatus">
                <div class="items">
                    <item>
                        真实姓名
                        <span class="item-note">{{relationshipName}}</span>
                    </item>
                    <item>
                        手机号码
                        <span class="item-note">{{relationshipTel}}</span>
                    </item>
                    <item>
                        关系
                        <span class="item-note">{{relationship|relationFilt}}</span>
                    </item>
                </div>
                <div class="items">
                    <item>
                        真实姓名
                        <span class="item-note">{{socialRelationName}}</span>
                    </item>
                    <item>
                        手机号码
                        <span class="item-note">{{socialRelationTel}}</span>
                    </item>
                    <item>
                        关系
                        <span class="item-note">{{socialRelation|relationFilt}}</span>
                    </item>
                </div>
            </template>
            <template v-else>
                <div class="items">
                    <b-linput label="真实姓名" placeholder="请输入真实姓名" v-model="relationshipName" ref="relationshipName"></b-linput>
                    <b-linput label="手机号码" placeholder="请填写手机号码" v-model="relationshipTel" ref="relationshipTel"></b-linput>
                    <b-item-radio label="选择关系" :list="relationList" v-model="relationship" ref="relationship"></b-item-radio>
                </div>
                <div class="items">
                    <b-linput label="真实姓名" placeholder="请输入真实姓名" :betterInput="1" v-model="socialRelationName" ref="socialRelationName"></b-linput>
                    <b-linput label="手机号码" placeholder="请填写手机号码" :betterInput="1" v-model="socialRelationTel" ref="socialRelationTel"></b-linput>
                    <b-item-radio label="选择关系" :list="societyList" v-model="socialRelation" ref="socialRelation"></b-item-radio>
                </div>
            </template>
            <md-button class="button button-block button-balanced" @click.native="closeUrgencyDo">
                确定
            </md-button>
        </div>
    </div>
</template>
<script src="./Personal.js"></script>
<style lang="scss" scoped src="./Personal.scss"></style>